<template>
  <div class="all">
     <!-- 头部固定导航栏 -->
     <van-nav-bar
      title="新增收货地址"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 收货地址详情填写 -->
    <van-address-edit
      :area-list="areaList"
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @change-detail="onChangeDetail"
    />
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import { addUserAddress } from '@/api/address'
export default {
  data () {
    return {
      areaList, // 地区列表
      searchResult: [], // 详细地址搜索结果
      userMessage: [] // 用户详细地址信息
    }
  },
  methods: {
    async onSave (save) {
      this.$toast('添加成功')
      console.log(save)
      this.userMessage = save
      const result = await addUserAddress(save.name, save.tel, [
        {
          value: 782,
          label: '上海'
        },
        {
          value: 783,
          label: '上海市'
        },
        {
          value: 785,
          label: '徐汇区'
        }
      ])
      console.log(result)
    },
    onChangeDetail (val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区'
          }
        ]
      } else {
        this.searchResult = []
      }
    }
  }
}
</script>

<style scoped>
/* 保存提交 */
.submit {
  width:100%;
  padding:10px;
  margin-top:10px;
}
.submit button {
  width:100%;
  height:50px;
  border-radius:50px;
  background:red;
  border:none;
  color:white;
}
</style>
